<template>
  <view class="controller" v-if="!isLoading" :style="'padding-top: calc('+($xyfun.xysys().buttonBound.top)+'px + 310rpx);'">
    <view class="linear-bg" :style="'padding-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
      <view class="navBarTit">
        <view class="yz-iconfont yz-jiantou1" @tap="$xyfun.back()"></view>
        <text>{{page_title}}</text>
      </view>
    </view>

    <view class="filter_box" :style="'top: calc('+($xyfun.xysys().buttonBound.top)+'px + 80rpx);'">
      <view class="filter" v-if="common.auditConfig.audit_on==0">
        <picker class="item" type="text" @change="ageRangeChange" range-key="name" :range="age_range_list">
          {{age_range!==''?age_range_list[age_range].name:'学段'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <picker class="item" type="text" @change="gradeChange" range-key="name" :range="grade_list">
          {{grade!==''?grade_list[grade].name:'年级'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <picker class="item" type="text" @change="subjectChange" range-key="name" :range="subject_list">
          {{subject!==''?subject_list[subject].name:'科目'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <picker class="item" type="text" @change="sexChange" :range="sex_list">
          {{sex!==''?sex_list[sex]:'性别'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <picker class="item" type="text" @change="distanceChange" :range="distance_list" v-if="lat && lng">
          {{distance!==''?distance_list[distance]:'距离'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <view v-else @tap="chooseUserLocation" class="item">
          距离
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </view>
      </view>

      <view class="filter" v-if="common.auditConfig.audit_on==1">
        <picker class="item" type="text" @change="distanceChange" :range="distance_list" v-if="lat && lng">
          {{distance!==''?distance_list[distance]:'距离'}}
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </picker>
        <view v-else @tap="chooseUserLocation" class="item">
          培训班距离
          <text class="yz-iconfont yz-sanjiaoxing"></text>
        </view>
      </view>

      <view class="search">
        <view class="yz-iconfont yz-sousuo"></view>
        <input type="text" placeholder-class="search_ph" @input="keywordInput" placeholder="请输入搜索关键词">
      </view>
    </view>

    <view class="lists">
      <view v-for="(item,index) in teacher_list" v-if="common.auditConfig.audit_on==0">
        <teacher-row :item="item"></teacher-row>
      </view>
      <view v-for="(item,index) in teacher_list" v-if="common.auditConfig.audit_on==1">
        <teacher-row2 :item="item"></teacher-row2>
      </view>
    </view>
    <xy-tabbar />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyTabbar from "@/components/xy-tabbar/index.vue";
import teacherRow from "@/components/teacher/row.vue"
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTitle from "@/components/xy-title/index.vue";
import teacherRow2 from "@/components/teacher/row2.vue";

export default {
  components: {xyTabbar,teacherRow,xyEmpty,xyTitle,teacherRow2},
  data() {
    return {
      page_title : '',
      isLoading: true,
      teacher_list: [],
      isEmpty: true,
      currentPage: 1,
      lastPage: 1,

      settled : '',
      recommend: '',
      keyword: '',
      age_range: '',
      age_range_list: [],
      grade: '',
      grade_list: [],
      subject: '',
      subject_list: [],
      sex: '',
      sex_list: ['不限','男','女'],
      distance: '',
      distance_list: ['不限','1km','2km','3km','4km','5km','10km','20km','30km','40km','50km','60km'],
      lat: 0,
      lng: 0
    };
  },
  computed: {
    ...mapState(['common'])
  },

  async onLoad(options) {
    let page_title = '';

    if(options?.settled){
      let settled = parseInt(options.settled);
      if(settled>=5){//付费入驻类型
        page_title = this.common.customConfig.settled_type[parseInt(options.settled)-5];
      }else{//非付费入驻类型
        page_title = this.common.customConfig.settled_type_free[parseInt(options.settled)-1];
      }
      this.settled = options.settled;
    }
    if(options?.recommend){
      page_title = '优选名师';
      this.recommend = 1;
    }
    // this.subject_list = this.common.customConfig.subject;
    // this.grade_list = this.common.customConfig.grade;
    this.age_range_list = [...[{id:'',name:'不限'}],...this.common.customConfig.age_range];

    if(uni.getStorageSync('lat')){
      this.lat = uni.getStorageSync('lat');
    }
    if(uni.getStorageSync('lng')){
      this.lng = uni.getStorageSync('lng');
    }
    if(this.common.auditConfig.audit_on==1){
      uni.setNavigationBarTitle({
        title : this.common.auditConfig.pages_teacher
      })
      this.page_title = this.common.auditConfig.pages_teacher;
    }else{
      if(page_title==''){
        page_title = '教师列表';
      }
      uni.setNavigationBarTitle({
        title : page_title
      })
      this.page_title = page_title;
    }


    this.loadData();

  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.teacher_list = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData() {
      var that = this;
      let postData = {
        page: that.currentPage,
      };
      if(this.settled!==''){
        postData.settled = that.settled;
      }
      if(this.recommend!==''){
        postData.recommend = that.recommend;
      }
      if(this.keyword!==''){
        postData.keyword = that.keyword;
      }
      if(this.age_range!==''){
        postData.age_range = that.age_range_list[that.age_range].id;
      }
      if(this.grade!==''){
        postData.grade = that.grade_list[that.grade].id;
      }
      if(this.subject!==''){
        postData.subject = that.subject_list[that.subject].id;
      }
      if(this.sex!==''){
        postData.sex = that.sex_list[that.sex];
      }
      if(this.lat && this.lng){
        postData.lat = that.lat;
        postData.lng = that.lng;
      }
      if(this.distance!==''){
        postData.distance = that.distance_list[that.distance];
      }
      this.$api.postBase({
        url: 'teacher/lists',
        loadingTip: '加载中...',
        data: postData,
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.teacher_list = [...this.teacher_list,...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
        }
      })
    },
    ageRangeChange(e){
      this.age_range = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];

      this.grade = '';
      let gradeData = this.$xyfun.grade_by_age_rang(this.common.customConfig.grade,this.age_range_list[this.age_range].id);
      this.grade_list = gradeData
      this.subject = '';
      this.subject_list = [];

      this.loadData();
    },
    subjectChange(e){
      this.subject = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];
      this.loadData();
    },
    gradeChange(e){
      this.grade = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];

      if(this.grade!==''){
        let subjectData = this.common.customConfig.subject;
        let res = this.$xyfun.subject_by_grade(subjectData,this.grade_list[this.grade].id,0);
        this.subject = '';
        this.subject_list =[...[{id : '', name : '不限'}], ...res.subject_list];
      }

      this.loadData();
    },
    sexChange(e){
      this.sex = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];
      this.loadData();
    },
    distanceChange(e){
      this.distance = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];
      this.loadData();
    },
    chooseUserLocation(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: '需要获取您具体的位置才能进行改操作',
        success: function (res) {
          if(res.confirm){
            uni.chooseLocation({
              success: res => {
                that.lat = res.latitude;
                that.lng = res.longitude;
                uni.setStorageSync('addr',res.address + res.name)
                uni.setStorageSync('lat',res.latitude)
                uni.setStorageSync('lng',res.longitude)
              },
              fail: err => {

              }
            });
          }
        }
      });

    },
    keywordInput(e){
      this.keyword = e.detail.value;
      this.currentPage = 1;
      this.teacher_list = [];
      this.loadData();
    }
  }
}
</script>

<style>
page{

}
</style>
<style lang="scss">
.controller{
  padding-top: 178rpx;
}
.linear-bg{
  background: #fff;
  z-index: 999;
  padding-bottom: 90rpx;
}
.filter_box{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  padding-bottom: 15rpx;
  background: #fff;
}
.filter{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 108rpx;
  border-top: 3rpx solid #ccc;
  border-bottom: 3rpx solid #ccc;
  box-sizing: border-box;
  background: #fff;
  .item{
    width: 19%;
    height: 54rpx;
    line-height: 50rpx;
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    color: #000;
    border-left: 1rpx solid #ccc;
    box-sizing: border-box;
    display: block;
    &:nth-child(1){
      border-left: 0;
      flex-grow: 1;
      text-align: right;
      padding-right: 26rpx;
    }
    &:nth-child(5){
      flex-grow: 1;
      text-align: left;
      padding-left: 26rpx;
    }
    text{
      display: inline-block;
      font-size: 16rpx;
      margin-left: 10rpx;
      position: relative;
      top: -2rpx;
    }
  }
}
.search{
  padding: 20rpx 18rpx 0 18rpx;
  position: relative;
  view{
    position: absolute;
    top: 34rpx;
    right: 44rpx;
    font-size: 42rpx;
    color: #ccc;
  }
  input{
    border-radius: 40rpx;
    border: 1rpx solid #ccc;
    height: 70rpx;
    font-size: 26rpx;
    padding-left: 30rpx;
  }
  .search_ph{
    color: #ccc;
  }
}
.lists{
  padding: 0 30rpx;
}
</style>
